<template>
    <scroll-view scroll-x="true" :scroll-into-view="navbarsId">
        <view class="header">
            <!-- 头部 -->
            <view v-for="(item, index) in headerlist" :key="index" :id="'tab' + index" @click="changeTab(index)"
                :class="['market', { active: index == currentIndex }]">
                {{ $t(`market.${item.realname}`) }}
                <view class="slider" v-if="index == currentIndex"></view>
            </view>
            <view class="shipping" v-if="currentIndex < 2">
                <view @click="show = true" v-if="currentIndex == 0">
                    {{ currSort }}
                </view>
                <view @click="show = true" v-if="currentIndex == 1">
                    {{ currSort1 }}
                </view>
                <view>
                    <image class="tangle-right" src="../../static/icon/tangle-right.png" mode="" />
                </view>
            </view>
        </view>
    </scroll-view>

    <swiper :autoplay="false" :duration="250" :current="currentIndex" @change="changeIndex" :style="'height:' + 100 + 'vh'"
        class="scroll-box">
        <swiper-item v-for="(item, index) in headerlist" :key="index">
            <scroll-view scroll-y="true" :style="'height:' + 100 + 'vh'">
                <shangshi v-if="item.realname == 'shangshi'" />
                <shanggui v-if="item.realname == 'shanggui'" />
                <shengou v-if="item.realname == 'shengou'" />
                <self v-if="item.realname == 'zixuan'" />
            </scroll-view>
        </swiper-item>
    </swiper>
    <u-picker v-model="show" mode="selector" :default-selector="[currSortIndex]" v-if="currentIndex == 0"
        :range="stockSortList" @confirm="confirm" @cancel="confirm">
    </u-picker>
    <u-picker v-model="show" mode="selector" :default-selector="[currSortIndex1]" v-if="currentIndex == 1"
        :range="stockSortList1" @confirm="confirm" @cancel="confirm">
    </u-picker>
</template>

<script setup>
import { ref, watch } from 'vue';
import { requestApi } from '@/api';
import { useStockStore } from '@/stores'
import { onLoad, onPullDownRefresh, onUnload } from '@dcloudio/uni-app';
import { setKey } from '@/utils/storage';

import shangshi from './components/onmarket.vue'
import shanggui from './components/onBox.vue'
import shengou from './components/shengou.vue'
import self from './components/self.vue'

// 头部
const navbarsId = ref('')
const currentIndex = ref(0)
function changeIndex(e) {
    currentIndex.value = e.detail.current
}
function changeTab(index) {
    if (currentIndex.value == index) return
    currentIndex.value = index
    if (currentIndex.value < 6) {
        navbarsId.value = 'tab' + index
    }
}

const headerlist = [
    {
        id: '1',
        realname: 'shangshi',
    },
    {
        id: '2',
        realname: 'shanggui',
    },
    {
        id: '3',
        realname: 'shengou',
    },
    {
        id: '4',
        realname: 'zixuan',
    },
]

/*
    1、获取到分类 √
    2、选择分类 √
    3、将当前选择的分类保存到pinia中 √
    4、子组件从pinia中获取并监听变化，变化时则重新请求数据 √
*/
const show = ref(false)
const currSortIndex = ref(0) //当前的索引
const currSortIndex1 = ref(0) //当前的索引
const currSort = ref('') //当前的股票类型
const currSort1 = ref('') //当前的上柜股票类型
const stockSortList = ref([])// 获取股票类型列表
const stockSortList1 = ref([])// 获取股票类型列表
const headerType = ref('tw')
const headerType1 = ref('two')
// 仓库
const store = useStockStore()
watch(currentIndex, (n, o) => {
    n == 0 && getIndustrys()
    n == 1 && getIndustrys(true)
},)
// 抽屉确认

function confirm(e) {
    uni.showLoading({
        title: '加载中'
    });
    if (currentIndex.value == 0) { // 0 市场
        currSortIndex.value = e[0]
        currSort.value = stockSortList.value[e[0]]
        store.addSortStock(currSort.value)
    } else { // 上柜
        currSortIndex1.value = e[0]
        currSort1.value = stockSortList1.value[e[0]]
        store.addSortStock1(currSort1.value)
    }
}

async function getIndustrys(bool = false) {
    // uni.showLoading({
    //     title: '加载中'
    // });
    const option = {
        region: 'TaiWan',
        type: headerType.value
    }
    const option1 = {
        region: 'TaiWan',
        type: headerType1.value
    }
    if (bool) {
        // 0
        const { data, status } = await requestApi.getIndustrys(option)
        if (status == 0) {
            stockSortList.value = data
            currSort.value = data[currSortIndex.value]
            store.addSortStock(currSort.value)
        }
    } else {
        // 1
        const { data, status } = await requestApi.getIndustrys(option1)
        if (status == 0) {
            stockSortList1.value = data
            currSort1.value = data[currSortIndex1.value]
            store.addSortStock1(currSort1.value)
        }
    }
}
let timer = null
onUnload(() => {
    clearInterval(timer)
})
onLoad(() => {
    timer = setInterval(() => {
        getIndustrys()
        getIndustrys(true)
    }, 6000)
    getIndustrys()
    getIndustrys(true)
    currentIndex.value = store.currentIndex || 0
})
// onPullDownRefresh(async () => {
//     const [status1, status2] = await Promise.all([
//         getIndustrys(),
//         getIndustrys(true)
//     ])
//     if (status1 && status2) {
//         uni.stopPullDownRefresh();
//     }
// })
</script>

<style lang="scss">
page {
    background-color: $uni-bg-color-dark;
}

.header {
    width: 100%;
    height: 88rpx;
    // #ifndef H5
    padding-top: 88rpx;
    // #endif
    padding-left: 12rpx;
    padding-right: 44rpx;
    padding-bottom: 12rpx;
    display: flex;
    align-items: center;
    background-color: #292A36;
    box-sizing: border-box;
    color: #7E8394;
    position: fixed;
    z-index: 99;

    .market {
        margin-right: 48rpx;
        position: relative;
        text-align: center;
        transition: all .2s;

        .slider {
            transition: all .2s;
            position: absolute;
            width: 32rpx;
            height: 6rpx;
            border-radius: 35rpx;
            background-color: #fff;
            bottom: -10rpx;
            left: 50%;
            transform: translateX(-50%);
        }
    }

    .shipping {
        color: #fff;
        margin-left: auto;
        align-items: center;
        display: flex;
    }

    .tangle-right {
        width: 13rpx;
        height: 24rpx;
        margin-left: 4rpx;
    }
}

.active {
    color: #fff;
}

.scroll-box {
    margin-top: 88rpx;

}





.red {
    color: #F04848 !important;
}

.green {
    color: #22A875 !important;
}
</style>